<template>
      <div class="box-view">
        <div class="box-view-title">
          <img src="../../assets/img/tit.png"/>
          <span class="box-view-title-text">{{name}}</span>
        </div>
        <div class="box-view-item">
          <slot></slot>
        </div>
    </div>
</template>

<script>
export default {
  mixins: [],
  components: {},
  props: ["name"],
  data () {
    return {
    }
  },
  computed: {},
  watch: {},
  created () {},
  mounted() {},
  methods: {},
}
</script>
<style lang="scss" scoped>
.box-view{
  height: 100%;
  width: 100%;
  .box-view-title{
    height: 30px;
    width: 100%;
    position: relative;
    img{
      width:100%;
      height: 100%;
      position:absolute;
      z-index: 1;
    }
    .box-view-title-text{
      width:100%;
      height: 100%;
      line-height:30px;
      position:absolute;
      z-index: 2;
      padding-left: 35px;
      font-size: 16px;
      color: #0e5cc6;
      background: linear-gradient(180deg, #fff, #0e5cc6);
      -webkit-background-clip: text;
      color: transparent;
      font-weight: bold;
    }
  }
  .box-view-item{
    height: calc(100% - 50px);
    width: calc(100% - 20px);
    background: linear-gradient(180deg,rgba(3,86,189,0.4),50%, rgba(3,86,189,0.0));
    border-radius: 0 0 10px 10px;
    padding: 10px;
  }
}
</style>
